import React, { useState } from 'react';
import { RoomStatus } from '../../../types/room';
import { RoomStatusManager, StatusCategory } from '../utils/RoomStatusManager';
import styles from '../styles/StatusSelector.module.css';

interface StatusSelectorProps {
  currentStatus: RoomStatus;
  onStatusChange: (newStatus: RoomStatus) => void;
  onClose: () => void;
  position: { x: number; y: number };
  roomNumber?: string;
}

const StatusSelector: React.FC<StatusSelectorProps> = ({
  currentStatus,
  onStatusChange,
  onClose,
  position,
  roomNumber,
}) => {
  const [selectedCategory, setSelectedCategory] = useState<
    StatusCategory | 'all'
  >('all');

  // 获取可转换的状态
  const availableTransitions =
    RoomStatusManager.getAvailableTransitions(currentStatus);

  // 如果没有可转换状态，添加当前状态以便显示
  const allStatuses =
    availableTransitions.length > 0
      ? [...availableTransitions, currentStatus]
      : [currentStatus];

  // 按分类过滤状态
  const filteredStatuses =
    selectedCategory === 'all'
      ? allStatuses
      : allStatuses.filter(
          status =>
            RoomStatusManager.getStatusCategory(status) === selectedCategory
        );

  // 分类标签
  const categoryLabels = {
    all: '全部',
    booking: '预订',
    cleaning: '清洁',
    maintenance: '维护',
    special: '特殊',
  };

  const handleStatusSelect = (status: RoomStatus) => {
    onStatusChange(status);
    onClose();
  };

  return (
    <>
      {/* 背景遮罩 */}
      <div className={styles.overlay} onClick={onClose} />

      {/* 状态选择器 */}
      <div
        className={styles.statusSelector}
        style={{
          left: Math.min(position.x, window.innerWidth - 320),
          top: Math.min(position.y, window.innerHeight - 400),
        }}
      >
        {/* 头部 */}
        <div className={styles.header}>
          <div className={styles.title}>
            <span>更改房间状态</span>
            {roomNumber && (
              <span className={styles.roomNumber}>{roomNumber}</span>
            )}
          </div>
          <button className={styles.closeBtn} onClick={onClose}>
            ✕
          </button>
        </div>

        {/* 当前状态 */}
        <div className={styles.currentStatus}>
          <span className={styles.label}>当前状态:</span>
          <div
            className={styles.statusBadge}
            style={{
              backgroundColor:
                RoomStatusManager.getStatusConfig(currentStatus)
                  .backgroundColor,
              color: RoomStatusManager.getStatusConfig(currentStatus).color,
              borderColor:
                RoomStatusManager.getStatusConfig(currentStatus).borderColor,
            }}
          >
            {RoomStatusManager.formatStatusText(currentStatus)}
          </div>
        </div>

        {/* 分类筛选 */}
        <div className={styles.categoryFilter}>
          {Object.entries(categoryLabels).map(([category, label]) => (
            <button
              key={category}
              className={`${styles.categoryBtn} ${
                selectedCategory === category ? styles.active : ''
              }`}
              onClick={() =>
                setSelectedCategory(category as StatusCategory | 'all')
              }
            >
              {label}
            </button>
          ))}
        </div>

        {/* 状态列表 */}
        <div className={styles.statusList}>
          {filteredStatuses.length === 0 ? (
            <div className={styles.noStatus}>当前状态下无可转换状态</div>
          ) : (
            filteredStatuses.map(status => {
              const config = RoomStatusManager.getStatusConfig(status);
              const isCurrentStatus = status === currentStatus;
              const canTransition = RoomStatusManager.canTransition(
                currentStatus,
                status
              );

              return (
                <button
                  key={status}
                  className={`${styles.statusItem} ${
                    isCurrentStatus ? styles.current : ''
                  } ${
                    !canTransition && !isCurrentStatus ? styles.disabled : ''
                  }`}
                  style={{
                    backgroundColor: config.backgroundColor,
                    color: config.color,
                    borderColor: config.borderColor,
                  }}
                  onClick={() => handleStatusSelect(status)}
                  disabled={!canTransition && !isCurrentStatus}
                >
                  <div className={styles.statusInfo}>
                    <div className={styles.statusName}>
                      <span className={styles.icon}>{config.icon}</span>
                      <span className={styles.text}>{config.label}</span>
                    </div>
                    <div className={styles.statusDescription}>
                      {config.description}
                    </div>
                    {isCurrentStatus && (
                      <div className={styles.currentBadge}>当前</div>
                    )}
                  </div>
                </button>
              );
            })
          )}
        </div>

        {/* 底部提示 */}
        <div className={styles.footer}>
          <div className={styles.hint}>
            💡 点击状态更改，只显示允许的状态转换
          </div>
        </div>
      </div>
    </>
  );
};

export default StatusSelector;
